<template>
  <div class="table-contaniner">
    <a-form class="smart-query-form">
      <a-row class="smart-query-form-row">
        <a-form-item label="事件类型" class="smart-query-form-item" v-if="!props.eventType">
          <a-radio-group v-model:value="queryForm.eventType" name="eventType" class="radio-group" @change="changeEventType">
            <a-radio value="0">关注</a-radio>
            <a-radio value="1">报警</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="船舶名称" class="smart-query-form-item">
          <a-input v-model:value="queryForm.vesselName" placeholder="请输入船舶名称" />
        </a-form-item>
        <a-form-item label="事件区域" class="smart-query-form-item">
          <a-select ref="select" v-model:value="queryForm.areaId" style="width: 175px" placeholder="请选择事件区域" allowClear>
            <a-select-option v-for="item in areaList" :key="item.areaId" :value="item.areaId">
              {{ item.areaName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="策略类型" class="smart-query-form-item">
          <a-select ref="select" v-model:value="queryForm.policyId" style="width: 175px" placeholder="请选择策略类型" allowClear>
            <a-select-option v-for="item in policyList" :key="item.policyId" :value="item.policyId">
              {{ item.policyName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="报警类型" class="smart-query-form-item" v-if="queryForm.eventType == '1'">
          <a-select ref="select" v-model:value="queryForm.alarmType" style="width: 175px" placeholder="请选择报警类型" allowClear>
            <a-select-option v-for="item in alarmTypeList" :key="item.value" :value="item.value">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="处理状态" class="smart-query-form-item" v-if="queryForm.eventType == '1'">
          <a-switch
            v-model:checked="queryForm.isProcessed"
            checkedChildren="已处理"
            :checkedValue="true"
            unCheckedChildren="未处理"
            :unCheckedValue="false"
          />
        </a-form-item>
        <a-form-item label="事件时间" class="smart-query-form-item">
          <a-range-picker v-model:value="queryForm.times" />
        </a-form-item>
        <a-form-item class="smart-query-form-item">
          <a-button type="primary" @click="queryData">
            <template #icon>
              <SearchOutlined />
            </template>
            查询
          </a-button>
          <a-button @click="resetQuery" class="smart-margin-left10">
            <template #icon>
              <ReloadOutlined />
            </template>
            重置
          </a-button>
          <a-button @click="showChart" class="smart-margin-left11">
            <template #icon>
              <AreaChartOutlined />
            </template>
            图表
          </a-button>
        </a-form-item>
      </a-row>
    </a-form>

    <div class="page-table">
      <a-table
        class="crud-table"
        :columns="columns"
        :data-source="tableData"
        :pagination="false"
        :loading="loading"
        :scroll="{ x: '100%', y: 'calc(100vh - 250px)' }"
      >
        <template #bodyCell="{ column, record, text }">
          <template v-if="column.dataIndex === 'shipNameImage'">
            <a-image :width="100" :src="`./images/mock/${record.shipNameImage}`" />
          </template>
          <template v-else-if="column.dataIndex === 'vesselName'">
            {{ text || '未知' }}
          </template>
          <template v-else-if="column.dataIndex === 'isProcessed'">
            {{ record.isProcessed ? '已处置' : '未处置' }}
          </template>
          <template v-else-if="column.dataIndex === 'operation'">
            <a-button type="primary" size="small" class="operat-button" @click="handleDetail(record)">详情</a-button>
          </template>
        </template>
      </a-table>

      <div class="smart-query-table-page">
        <a-pagination
          showSizeChanger
          showQuickJumper
          show-less-items
          :pageSizeOptions="PAGE_SIZE_OPTIONS"
          :defaultPageSize="queryForm.size"
          v-model:current="queryForm.current"
          v-model:pageSize="queryForm.size"
          :total="total"
          @change="onload"
          @showSizeChange="onload"
          :show-total="(total) => `共${total}条`"
        />
      </div>
    </div>
    <EventDetail ref="eventDetailRef" v-if="detailShow" @close="detailClose" @reload="onload" />
  </div>
</template>
<script setup>
  import { ref, nextTick, onMounted } from 'vue';
  import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
  import { api as areaApi } from '/@/api/plat/area.js';
  import { api as eventApi } from '/@/api/plat/event.js';
  import { api as policyApi } from '/@/api/plat/policy.js';
  import EventDetail from '../../alarmDetail/index.vue';
  import { dateFormat } from '/@/utils/date';
  import { alarmTypeList } from '/@/config/strategy.js';

  const props = defineProps(['eventType']);

  const emit = defineEmits(['change']);
  const show = ref(false);
  const queryFormState = {
    current: 1,
    size: 10,
    isComplete: true, // 事件是否结束
    eventType: '0',
    isProcessed: false,
  };
  const pageType = ref('table');
  const total = ref(0);
  const queryForm = ref({ ...queryFormState });
  const columns = [
    {
      title: '策略名称',
      dataIndex: 'policyName',
    },
    {
      title: '触发区域',
      dataIndex: 'areaName',
    },
    {
      title: '船舶名称',
      dataIndex: 'vesselName',
    },
    {
      title: 'MMSI',
      dataIndex: 'mmsi',
    },
    {
      title: '触发时间',
      dataIndex: 'startTime',
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
    },
  ];
  const areaList = ref([]);
  const policyList = ref([]);
  const tableData = ref([]);
  let loading = ref(false);
  const eventDetailRef = ref();
  const detailShow = ref(false);

  async function open(type = '0') {
    loading.value = true;
    queryForm.value.eventType = type;
    if (type === '1') {
      columns.push({
        title: '是否处置',
        dataIndex: 'isProcessed',
        width: 120,
        align: 'center',
      });
    }
    columns.push({
      title: '操作',
      dataIndex: 'operation',
      width: 120,
      fixed: 'right',
    });
    show.value = true;
    await getAreaList();
    queryData();
    getPolicyList();
  }

  onMounted(() => {
    open(props.eventType);
  });

  function queryData() {
    queryForm.value.current = 1;
    if (queryForm.value.times && queryForm.value.times.length > 0) {
      queryForm.value.startTime = dateFormat(new Date(queryForm.value.times[0]), 'yyyy-MM-dd 00:00:00');
      queryForm.value.endTime = dateFormat(new Date(queryForm.value.times[1]), 'yyyy-MM-dd 23:59:59');
    }
    onload();
  }

  function changeEventType() {
    queryForm.value.alarmType = undefined;
    queryData();
    getPolicyList();
  }

  function onload() {
    loading.value = true;
    eventApi.queryPage(queryForm.value).then(({ data }) => {
      tableData.value = data.records;
      total.value = data.total;
      loading.value = false;
    });
  }

  function showChart() {
    emit('change', 'ChartsCard');
  }
  function handleDetail(row) {
    detailShow.value = true;
    nextTick(() => {
      eventDetailRef.value.open(row);
    });
  }
  function detailClose() {
    detailShow.value = false;
  }

  function getAreaList() {
    return new Promise((r) => {
      areaApi.queryList().then(({ data }) => {
        areaList.value = data;
        r(data);
      });
    });
  }

  function getPolicyList() {
    policyApi.queryList({ policyType: queryForm.value.eventType }).then(({ data }) => {
      policyList.value = data;
    });
  }

  function resetQuery() {
    queryForm.value = { ...queryFormState, eventType: queryForm.value.eventType };
    queryData();
  }

  function close() {
    queryForm.value = { ...queryFormState };
    show.value = false;
  }

  defineExpose({
    open,
  });
</script>

<style lang="less" scoped>
  .smart-query-form {
    background-color: transparent;
    &:deep .ant-form-row {
      .ant-form-item-label {
        label {
          color: #fff;
        }
      }
      .ant-radio-group {
        span {
          color: #fff;
        }
      }
      input::placeholder {
        font-size: 14px;
      }
    }
  }
  .smart-margin-left11 {
    background-color: #e6a23c;
    border-color: #e6a23c;
    color: #fff;
    margin-left: 10px;
    &:hover {
      background-color: #ebb563;
      color: #fff;
      border-color: #e6a23c;
    }
  }
  @import '/@/assets/style/table1.less';
</style>
